<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>生命周期</h1>
        <h3>
            {{msg}}
        </h3>
        <h3>
            {{num}}
        </h3>
        <button @click='num1' >更新数据</button>

        <hr>

        <h1>mixin</h1>

        <hr>

		<p>
            firstname    <input v-model='firstname' type="text"  >
        </p>
        <p>
            lastname   <input v-model='lastname' type="text">
        </p>
        <p>
            fullname      <input  v-model='fullname' type="text">
        </p>
        <h1>{{fullname}}</h1>

    </div>
</body>

    <script src="./vue.js"></script>    
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script>

        // mixin
        var mymixin = {
            created:function(){
                this.hello()
            },
            methods:{
                hello:function(){
                    console.log('进入mixin的hello');
                }
            }
        }
        // 自定义指令
        Vue.directive('red',{
            inserted:function(el){
                el.style.color = 'red'
            }
        })

        Vue.directive('color',{
            inserted:function(el,binding){
                el.style.color = binding.value
            }
        })


        var app = new Vue({
            mixins:[mymixin],
            el:'#app',
           data:{
             firstname:'',
             lastname:'',
             fullname:'',
			 num:'111'
           },
            methods:{

                // 生命周期
                
                submit(){
                    console.log('进入submit');
                },
                d(){
                    console.log('进去d');
                },
                num1(){
                    console.log('进入num1');
                    this.num++
                    // this.num2++
                },



                fn(){
                    console.log('调用fn()');
                },
            directives:{
                mobile:{
                    update:function(el){
                        console.log(el.value);
                        if(!(/^1[3-9]\d{9}$/).test(el.value)){
                            el.style.color = 'red'
                        } else {
                            el.style.color = 'skyblue'
                        }
                    }
                }
            },

            // 计算属性

            computed:{
                aaa(){
                    console.log('计算属性执行');
                    return this.fruits
                }
            }


            },

            // 监听器

            watch:{
            firstname:function(val){
                this.fullname = val + '' +this.lastname
            },
            lastname:function(val){
                this.fullname = this.firstname + '' + val
            }
        },

            // 生命周期函数 beforeCreate
            // 创建之前 new 操作部署能力过程中 还没有全部准备完成
            beforeCreate(){
                console.log('进入生命周期函数beforeCreate');
                console.log(this.data);
            },
            // 生命周期函数 created
            // 创建之后 data methods 已经部署完成
            created(){
                console.log('进入生命周期created');
                console.log(this.fruits);
                this.d()

                axios({
                    url:'http://localhost:5001/vuestudy',
                    method:'get',
                    params:{
                        username:'YanShen'
                    }
                }).then(response => {
                    console.log(response);
                    console.log(response.data[0].username);
                    this.username = response.data[0].username
                }).catch(error => {
                    console.log(error);
                })
                console.log('进入生命周期created');
                console.log(this.fruits);
                this.d()


            // 学习axios 的post 请求
            // axios({
            //     url: 'http://localhost:5001/vuestudy',
            //     method: 'post',
            //     data: {
            //         username: 'zs',
            //         password: '123456'
            //     }
            // }).then(response => {
            //     console.log(response)
            // }).catch(error => {
            //     console.log(error)
            // })


            },

             //虽然created数据已经架构完成 但是没经过算法和dom元素的比对和插入
            //中间  有算法 要dom比对和插入   数据渲染之前   基本已经准备好了 就等最后给 页面了
            // 这一步 是不是可以做 再最后检查下数据是不是对  不对 马上变

            beforeMount(){
                console.log('进入beforeMount');
                console.log(this.fruits);
                this.d()
                if(this.msg = 'aaa') {
                    this.msg = '正确数据'
                }
            },
            // 数据  data methods 都拿到了  数据也到了 dom元素 页面上了 
            mounted(){
                console.log('mounted');
            },
            //数据更新前
            beforeUpdate(){
                console.log('beforeUpdate');
            },
             //数据更新后
            updated(){
                console.log('进入updated');
            },
            //页面销毁之前
            beforeDestroy(){
                console.log('页面销毁之前');
            },
            //页面销毁之后
            destroyed(){
                console.log('页面销毁之后');
            }

        })

        console.log(app);

    </script>

</html>